<!-- ContentRenderer.vue -->
<template>
    <div class="content-renderer">
      <template v-for="(block, index) in blocks" :key="index">
        <component
          :is="getComponent(block.type)"
          :block="block"
          class="content-block"
        />
      </template>
    </div>
  </template>
  
  <script setup>
  import { defineAsyncComponent } from 'vue'
  
  const props = defineProps({
    blocks: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(item => ['text', 'image', 'video'].includes(item.type))
      }
    }
  })
  
  // 动态加载内容组件
  const getComponent = (type) => {
    const components = {
      text: defineAsyncComponent(() => import('./ContentText.vue')),
      image: defineAsyncComponent(() => import('./ContentImage.vue')),
      video: defineAsyncComponent(() => import('./ContentVideo.vue'))
    }
    return components[type] || null
  }
  </script>
  
  <style scoped>
  .content-renderer {
    line-height: 1.8;
  }
  
  .content-block {
    margin: 1.5rem 0;
  }
  </style>